$primary-color: rgb(206, 100, 255);
$primary-color-dark: rgb(189, 73, 243);

$tab-mormal-color: #161727;
$tab-active-color: #282c34;
$tab-border-color: #111216;
$tab-button-normal-color: #cccccc;
$tab-button-hover-color:  #7e7e7e;

$light-theme-tab-mormal-color: #e0e0e0;
$light-theme-tab-active-color: #fff;
$light-theme-tab-border-color: #d8d8d8;
$light-theme-tab-button-normal-color: #cccccc;
$light-theme-tab-button-hover-color: #7e7e7e;

$tab-height: 35px;

/* PC Scrollbar */

@mixin pc-fix-scrollbar() {
  @media (min-width: 768px) {
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    &::-webkit-scrollbar-thumb {
      background: #707070;
      border-radius: 3px;

      &:hover {
        background: #e0e0e0;
      }
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }
}

@mixin pc-fix-scrollbar-white() {
  @media (min-width: 768px) {
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d6d6d6;
      opacity: .7;
      border-radius: 3px;

      &:hover {
        background: #707070;
      }
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }
}

/* Debug */

$debug-color:  #d32a00;

.dock-debug {
  position: absolute;
  top: $tab-height + 2px;
  left: 2px;
  padding: 1px;
  font-size: 10px;
  border: 1px solid $debug-color;
  color: $debug-color;
  background-color: #fff;
  z-index: 100;
}